/* Prism components — hero: top-of-page featured carousel (Splide fade).
   Contained (rounded) by default; white text over a dark scrim so it reads on any
   poster and in either theme. Base track/arrow/pagination layout comes from
   asset/css/vendor/splide.min.css; this skins it. Container-query responsive. */
.c-hero{position:relative;container-type:inline-size;overflow:hidden;
  border-radius:var(--radius-lg);margin-top:0;margin-bottom:var(--section-gap);
  background:var(--c-surface-2);box-shadow:var(--shadow-2)}
.c-hero .splide__track{border-radius:inherit}

.c-hero__slide{position:relative;display:block;color:#fff;aspect-ratio:16 / 6;min-height:280px;max-height:62vh}
.c-hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.c-hero__scrim{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(8,10,15,.92) 0%,rgba(8,10,15,.66) 38%,rgba(8,10,15,.12) 72%,rgba(8,10,15,0) 100%)}

.c-hero__inner{position:absolute;inset:0;display:flex;align-items:center;
  padding-inline:clamp(1.25rem,5vw,3.5rem);padding-block:var(--space-lg)}
.c-hero__content{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;max-width:min(560px,82%)}

.c-hero__cat{font-size:var(--fs-xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  padding:.3em .7em;border-radius:var(--radius-pill);background:var(--c-accent);color:var(--c-accent-ink)}
.c-hero__title{font-size:clamp(1.6rem,3.6vw,2.6rem);line-height:1.12;color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.45)}
.c-hero__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.45em 1em;font-size:var(--fs-sm);color:rgba(255,255,255,.88)}
.c-hero__meta>span{display:inline-flex;align-items:center;gap:.3em}
.c-hero__score{color:#ffc53d;font-weight:600}
.c-hero__score .bi{font-size:.95em}
.c-hero__tag{padding:.1em .55em;border:1px solid rgba(255,255,255,.4);border-radius:var(--radius-sm);font-size:var(--fs-xs)}
.c-hero__desc{font-size:var(--fs-sm);line-height:1.55;color:rgba(255,255,255,.82);max-width:48ch}
.c-hero__cta{display:inline-flex;align-items:center;gap:.45em;margin-top:.35rem;
  padding:.6em 1.3em;font-size:var(--fs-sm);font-weight:600;border-radius:var(--radius-pill);
  background:var(--c-accent);color:var(--c-accent-ink);box-shadow:var(--shadow-2);
  transition:transform var(--dur) var(--ease),filter var(--dur) var(--ease)}
.c-hero__cta .bi{font-size:1.2em}
.c-hero__slide:hover .c-hero__cta{transform:translateY(-1px);filter:brightness(1.07)}

/* Splide arrows + pagination, themed light over the image */
.c-hero .splide__arrow{width:2.6em;height:2.6em;opacity:1;background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.28);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.c-hero .splide__arrow svg{width:1.1em;height:1.1em;fill:#fff}
.c-hero .splide__arrow:hover:not(:disabled){background:var(--c-accent);border-color:var(--c-accent)}
.c-hero .splide__pagination{bottom:.7em;padding:0}
.c-hero .splide__pagination__page{width:9px;height:9px;margin:0 4px;background:rgba(255,255,255,.5);opacity:1;transition:transform var(--dur) var(--ease),background var(--dur) var(--ease)}
.c-hero .splide__pagination__page.is-active{background:#fff;transform:scale(1.35)}

/* narrow containers: taller frame, scrim from the bottom, hide blurb + arrows */
@container (max-width:680px){
  .c-hero__slide{aspect-ratio:4 / 3;min-height:0;max-height:none}
  .c-hero__scrim{background:linear-gradient(0deg,rgba(8,10,15,.94) 0%,rgba(8,10,15,.5) 46%,rgba(8,10,15,.05) 100%)}
  .c-hero__inner{align-items:flex-end}
  .c-hero__content{max-width:100%;gap:.45rem}
  .c-hero__desc{display:none}
  .c-hero .splide__arrow{display:none}
}